<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div class="div">
			<p>div中的p标签</p>
		</div>
	</body>

</html>

<style type="text/css">
	p {
		background: gray;
	}
	
	.div {
		border: 1px solid red;
		height: 200px;
	}
	/* 在div里面添加before伪类,内容为 '在前',背景颜色为绿色*/
	.div:before{
		content: '在前';
		background: green;
		color:#fff;
		border:1px solid;
		display: block;
		height:30px;
	}
	/* 在div里面添加after伪类,内容为 '在后',背景颜色为红色*/
	.div:after{
		content: '在后';
		background: green;
		color:#fff;
		border:1px solid;
		display: block;
		height: 30px;
	}
</style>